import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [
      {id:1,title:'孟婆的碗',done: true},
      {id:2,title:'孟婆的筷',done: false},
      {id:3,title:'孟婆的饭',done: false},
      {id:4,title:'孟婆的菜',done: true},
      {id:5,title:'孟婆的汤',done: true}
    ],
    studentInfo: [
      {
        Id: 1,
        stuName: '王显辉',
        age: 22,
        sex: '男'
      },
      {
        Id: 1,
        stuName: '王小辉',
        age: 24,
        sex: '男'
      },
      {
        Id: 1,
        stuName: '王大辉',
        age: 22,
        sex: '女'
      },
      {
        Id: 1,
        stuName: '王辉',
        age: 24,
        sex: '女'
      },
      {
        Id: 1,
        stuName: '王老辉',
        age: 23,
        sex: '男'
      }
    ]
  },
  mutations: { //显式地提交 (commit) mutation,方便地跟踪每一个状态的变化
    increment: function(state){
      state.count ++
    },
    incrementBy: (state,num) =>{
      state.count +=num
    }
  },
  getters: {//Getter 接受 state 作为其第一个参数
    todoDone: state => {
      return state.todos.filter(todo =>todo.done)
    },
    todoDoneCount: (state,getters) => {//Getter可以接受其他的getter作为第二个参数
      return `${state.count}+${getters.todoDone.length}`
    },
    todostuAge: state =>{
      return state.studentInfo.filter(item =>item.age ===22)
    }
  },
  actions:{

  }
})

//通过属性访问
console.log(store.state.count)// 0
store.commit('increment')
console.log(store.state.count)// 1
store.commit('incrementBy', 10)
console.log(store.state.count)// 11

console.log('-----------------------------')

console.log(store.getters.todoDone)
console.log(store.getters.todoDone.length)
console.log(store.getters.todoDoneCount)
console.log(store.getters.todoDoneCount.length)


export default store
